跳到主要内容

接受数组

当 XMLHttpRequest 对象的 responseType 属性设置为 arrayBuffer 时，服务器响应数据将是一个 ArrayBuffer 对象。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
    window.mozIndexedDB || window.msIndexedDB; window.IDBTransaction =
    window.IDBTransaction || window.webkitIDBTransaction ||
    window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange ||
    window.webkitIDBKeyRange || window.msIDBKeyRange; window.IDBCursor =
    window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor; window.URL
    = window.URL || window.webkitURL; var dbName = 'imgDB'; // 数据库名 var
    dbVersion = 20190418; 版本号 // var idb; function init() { var dbConnect =
    indexedDB.open(dbName, dbVersion); // 连接数据库 dbConnect.onsuccess =
    function (e) { // 连接成功 idb = e.target.result; // 获取数据库 };
    dbConnect.onerror = function () { alert(' 数据库连接失败 '); };
    dbConnect.onupgradeneeded = function (e) { idb = e.target.result; var tx =
    e.target.transaction; tx.onabort = function (e) { alert(' 对象仓库创建失败
    '); }; var name = 'img'; var optionalParameters = { keyPath: 'id',
    autoIncrement: true, }; var store = idb.createObjectStore(name,
    optionalParameters); alert(' 对象仓库创建成功 '); }; } function
    downloadPic() { var xhr = new XMLHttpRequest(); xhr.open('GET',
    'images/1.png', true); xhr.responseType = 'arrayBuffer'; xhr.onload =
    function (e) { if (this.status == 200) { var bb = new Blob([this.response]);
    var reader = new FileReader(); reader.readAsDataURL(bb); reader.onload =
    function (f) { var result = document.getElementById('result'); // 在 IndexDB
    数据库中保存二进制数据 var tx = idb.transaction(['img'], 'readwrite');
    tx.oncomplete = function () { alert('保存数据成功 '); }; tx.onabort =
    function () { alert(' 保存数据失败 '); }; var store = tx.objectStore('img');
    var value = { img: this.result }; store.put(value); }; } }; xhr.send(); }
    function showPic() { var tx = idb.transaction(['img'], 'readonly'); var
    store = tx.objectStore('img'); var req = store.get(1); req.onsuccess =
    function () { if (this.result == undefined) { alert(' 没有符合条件的数据 ');
    } else { var img = document.createElement('img'); img.src = this.result.img;
    document.body.appendChild(img); } }; req.onerror = function () { alert('
    获取数据失败 '); }; }
  </head>

  <body onload="init()">
    <input type="button" value=" 下载图片 " onclick="downloadPic()" />

    <input type="button" value=" 显示图片 " onclick="showPic()" /><output
      id="result"
    ></output>
  </body>
</html>